<template>
	<view>
		<navbar title="世界记忆" :autoBack="true">
			<view class="rightbtn" slot='rightbtn' @click="navto('/pages/home/load')">
				我要载入
			</view>
		</navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con" v-if="!loading">
				<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
					<view class="con__item" v-for="(item,index) in globalmemory" :key="index" @click="navto('/pages/home/celebrity?id='+item.id)">
						<image :src="URL(item.image)" class="con__item__pic" mode="aspectFill"></image>
						<view class="con__item__ms">
							<view class="con__item__ms__name">
								{{item.title}}(第{{index+1}}名)	
							</view>
							<view class="con__item__ms__text u-line-3">
								{{item.intro}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loading-icon :show='loading'></u-loading-icon>
		</scroll-view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				loading:false,
				globalmemory:[]
			};
		},
		onLoad() {
			this.loading=true
			home.initData().then(res=>{
				if(res.data.code==1){
					this.loading=false
					this.globalmemory=res.data.data.globalmemory
				}
			})
		}
	}
</script>

<style lang="scss">
	.rightbtn {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #1E1E1E;
		line-height: 30rpx;
	}

	page {
		background-color: #F0F3F7;
	}
	.con{
		padding: 20rpx 30rpx;
		&__item{
			width: 334rpx;
			background: #FFFFFF;
			border: 1rpx solid #BFCDE1;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			margin-top: 24rpx;
			&__pic{
				width: 334rpx;
				height: 344rpx;
				background: #D9D9D9;
				border-bottom: 1rpx solid #BFCDE1;
			}
			&__ms{
				margin-top: -4px;
				padding: 20rpx 20rpx 18rpx;
				
				&__name{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #181818;
					line-height: 26rpx;
					margin-bottom: 7rpx;
				}
				&__text{
					width: 294rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #6F7271;
					line-height: 36rpx;
					height: 110rpx;
				}
			}
		}
	}
</style>